<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		.one{
			width: 200px;
			height: 200px;
/*			background-color: red;*/
			margin-left: 400px;
/*			position: relative;*/
/*			left: 200px;*/
/*			top: 200px;*/
/*			left: ;*/
/*			right: ;*/
/*			top: ;*/
/*			bottom: ;*/
/*			相对定位 相对定位不脱标 参考自身进行位置移动 移动后 原本所占据的空间是不会改变的 盒子走了 位置还在*/

			position: absolute;
			left: 0;
			top: 0;
/*			绝对定位 绝对定位 脱标 绝对定位参考 有定位属性的父级 如果没有就会一直向上寻找 如果都没有，最后参考body */
		}
		.two{
			width: 300px;
			height: 300px;
			background-color: blue;
			margin-left: 400px;
			position: relative;
		}
/*		子绝父相 子级设置绝对定位 父级设置相对定位 目的是让父级不脱标的同时让子级以父级为参考点 相对定位对父级影响最小*/
		.child{
			width: 100px;
			height: 100px;
			background-color: pink;
			position: absolute;
/*			left: 0;*/
			right: 0;
			bottom: -888px;
/*			左边 距离 (有定位的父级0px)body 0px */
		}
		.three{
			width: 100px;
			height: 100px;
			background-color: skyblue;
			position: fixed;
/*			固定定位  会脱标 参考点 浏览器首屏 */
			right: 0;
			bottom: 0;
		}
	</style>
</head>
<body>


	<!-- <div class="one"></div> -->

	<div class="two">
		<div class="child"></div>
	</div>

	<div class="three">
		1111
	</div>

</body>
</html>